<template>
  <div class="container-audio" :class="{active: showAudio}">
        <!-- <button type="button" class="mui-btn mui-btn-success" @click='callRecept'>接通</button> -->
        <!-- <button type="button" class="mui-btn mui-btn-success" @click='callRefuse'>挂断</button> -->
        <!-- voiceWaiting true样式居中 -->
        <div class='person-icon' :class="{active: voiceWaiting}">
            <!-- <span> -->
            <img src="../../assets/touxiang.jpg" alt="您还没有设置头像">
            <!-- </span> -->
            <!-- voiceWaiting: false 展示正在接听 true不展示 -->
            <span class="waiting" :class='{active: voiceWaiting}'>正在等待对方接听...</span>
        </div>
        <!-- voiceWaiting: false 居中  true居右-->
        <!-- <div class='dropped' @click="droppedBtn" :class='{active: voiceWaiting}'> -->
        <div class='dropped' @click="droppedBtn">
            <span class="icon-phone-hang-up"></span>
        </div>
            <!-- voiceWaiting: false 不展示  true展示 -->
        <!-- <div class='handing' @click="handingBtn" :class='{active: !voiceWaiting}'>
            <span class="icon-phone" ></span>
        </div> -->
  </div>
</template>
<script>
import {mapState} from 'vuex'
  export default {
    //   showAudio父组件传值过来 true:展示这整个组件 false：整个组件不展示
    //   props: ['showAudio'],
      data() {
          return {
            //  showAudioRes1 : this.showAudio
            // true:正在等待，出现  false已经不等待消失，同时控制图片的位置是否居中true：居左 false：居右
            // 全局变量控制这个状态
            // showWaiting: false
          }
      },
      computed: {
          ...mapState(['showAudio', 'voiceWaiting'])
      },
      methods: {
        //   callRecept() {
        //       console.log('接受语音聊天')
        //       this.$emit('zicallback', false)
        //       this.$imrtccall.acceptCall()
        //   },
        //   callRefuse() {
            //   console.log('挂断语音聊天')
            //   this.$emit('zicallback', false)
            //   this.$imrtccall.endCall()
        //   },
          droppedBtn() {
              console.log('挂断语音聊天')
              this.$emit('zicallback', false)
              this.$imrtccall.endCall()
          }
        //   handingBtn() {}
      }
  }
</script>
<style lang='scss' scoped>
@import url('../../public/scss/style.css');
.container-audio {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 12;
    background: rgb(104, 104, 104);
    transition: all 0.4s ease;
    transform: translateY(100%);
    &.active{
        transform: translateY(0);
    }
    .person-icon{
        width: 120px;
        height: 120px;
        position: absolute;
        left: 5vw;
        top: 10vh;
        img{
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        &.active{
            left: 34vw;
        }
        .waiting{
            width: 182px;
            position: absolute;
            left: 36vw;
            top: 15vh;
            &.active{
                display: none;
            }
        }
    }
    .dropped{
        position: absolute;
        bottom: 10vh;
        left: 40vw;
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 50%;
        background: red;
        text-align: center;
        font-size: 30px;
        /*
        &.active{
            left: 70vw;
        }
        */
    }
    /*
    .handing{
        position: absolute;
        bottom: 10vh;
        left: 16vw;
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 50%;
        background: green;
        text-align: center;
        font-size: 30px;
        &.active{
            display: none;
        }
    }
    */
}
</style>
